<template>
  <div class="flex-col justify-start page">
  <div class="flex-col section">
    
    <div class="flex-col mt-19">
      <div class="flex-row">
            <div class="flex-row flex-1 justify-start">
                <img class="image_2" @click="goback" src="https://shops.cg500.com/static/aijiu/long-arrow-left-black.png" />
            </div>
            <div class="flex-row flex-1 justify-center">
                <span class="text">业绩</span>
            </div>
            <div class="flex-row flex-1"></div>
        </div>
      <div class="flex-row justify-center items-center  group">
        
      </div>
      <div class="flex-col mt-15">
        <div class="flex-col items-start list-item mt-15" v-for="(item, index) in list" :key="index">
          <span class="font">{{item.type}}</span>
          <span class="font_2 mt-11-5">数量：{{item.num}}个</span>
          <span class="font_2 mt-11-5">时间：{{item.time}}</span>
        </div>
      </div>
    </div>
  </div>
</div>
</template>
<script>
import performanceDetailController from "./performanceDetailController";
export default performanceDetailController;
</script>

<style lang="scss" scoped>
@import "../common/common.css";
.mt-19 {
  margin-top: 1.19rem;
}
.mt-15 {
  margin-top: 0.94rem;
}
.mt-11-5 {
  margin-top: 0.72rem;
}
.page {
  padding-bottom: 19.44rem;
  background-color: #f5f5f5;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.section {
  padding: 0.94rem 0.47rem 5.81rem 0.91rem;
  background-image: url('https://shops.cg500.com/static/guxinyu_yeji_bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.image {
  margin-left: 1.13rem;
  margin-right: 0.47rem;
  width: 20.47rem;
  height: 0.75rem;
}
.group {
  padding: 0.47rem 0;
}
.image_2 {
  width: 0.63rem;
  height: 1.09rem;
  margin: 0;
}
.pos_3 {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.text {
  color: #222222;
  font-size: 1.13rem;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 1.06rem;
}
.group_2 {
  width: 5.44rem;
}
.pos {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.section_2 {
  opacity: 0.5;
  background-color: #ffffff;
  border-radius: 1rem;
  height: 2rem;
  border-left: solid 0.031rem #eaeaea;
  border-right: solid 0.031rem #eaeaea;
  border-top: solid 0.031rem #eaeaea;
  border-bottom: solid 0.031rem #eaeaea;
}
.image_4 {
  width: 1.16rem;
  height: 0.41rem;
}
.pos_5 {
  position: absolute;
  left: 0.84rem;
  top: 50%;
  transform: translateY(-50%);
}
.image_3 {
  width: 1.06rem;
  height: 1.06rem;
}
.pos_4 {
  position: absolute;
  right: 0.84rem;
  top: 50%;
  transform: translateY(-50%);
}
.section_3 {
  background-color: #cccccc4d;
  height: 1.19rem;
}
.pos_2 {
  position: absolute;
  left: 2.69rem;
  right: 2.69rem;
  top: 50%;
  transform: translateY(-50%);
}
.list-item {
  margin-right: 0.47rem;
  padding: 0.94rem 1.25rem;
  background-image: linear-gradient(180deg, #ffffff 0%, #ffffff 52%, #ffffff 100%);
  border-radius: 0.5rem;
}
.list-item:first-child {
  margin-top: 0;
}
.font {
  font-size: 1rem;
  font-family: PingFang SC;
  line-height: 0.97rem;
  font-weight: 500;
  color: #343434;
}
.font_2 {
  font-size: 0.88rem;
  font-family: PingFang SC;
  line-height: 0.84rem;
  color: #666666;
}
</style>
